<template>
  <v-row no-gutters>
      <v-col lg="6" offset-lg="3" md="8" offset-md="2" sm="10" offset-sm="1">
        <v-card flat outline class="mt-12">
          <v-toolbar flat>
            <v-toolbar-title class="black--text headline">注册</v-toolbar-title> 
          </v-toolbar>
          <v-card-text class="px-8">
            <v-col>
                <v-text-field label="账号" v-model.trim="username" :rules="rules_username" validate-on-blur color="black"></v-text-field>
            </v-col>
            <v-col>
                <v-text-field label="密码" type="password" v-model.trim="password" :rules="rules_password" validate-on-blur color="black"></v-text-field>
            </v-col>
            <v-col>
                <v-text-field label="确认密码" type="password" v-model.trim="confirm_password" validate-on-blur color="black" :rules="rules_confirm"></v-text-field>
            </v-col>
            <v-col>
              <v-row no-gutters justify="end">
                <v-btn text large class="subtitle-1">
                  register
                </v-btn>
              </v-row>
            </v-col>
          </v-card-text>
        </v-card>
      </v-col>
  </v-row>
</template>

<script>
import jquery from '../plugins/formVaildate'

export default {
  data () {
    return {
      username: '',
      password: '',
      confirm_password: '',
      valid: false,
      length_control: true,
      space_control: true,
      cn_control: false,
      at_least_one_letter: true,
      at_least_one_number: true,
      isemail: true
    }
  },
  computed: {
    rules_password () {
      const rules = []

      if (this.length_control) {
        let rule = v => jquery.lengthcontrol(v)
        rules.push(rule);
      }
      if (this.space_control) {
        let rule = v => jquery.nospace(v)
        rules.push(rule);
      }
      if (this.cn_control) {
        let rule = v => jquery.nocn(v)
        rules.push(rule);
      }
      if (this.at_least_one_letter) {
        let rule = v => jquery.atleastoneletter(v)
        rules.push(rule);
      }
      if (this.at_least_one_number) {
        let rule = v => jquery.atleastonenumber(v);
        rules.push(rule);
      }

      return rules
    },
    rules_username () {
      const rules = []
      if (this.isemail) {
        var reg = new RegExp("^[a-z0-9A-Z]+[- | a-z0-9A-Z . _]+@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\\.)+[a-z]{2,}$"); 
        let rule = v => reg.test((v || "")) || `邮箱格式不正确`
        rules.push(rule);
      }
      return rules
    },
    rules_confirm () {
      const rules = []
      let rule = v => this.confirm_password === this.password || `两次密码输入不一致`;
      rules.push(rule);
      return rules
    }
  },
  methods: {
  }
};
</script>

<style>
</style>